<template>
    <div class="container">
      <div class="c-top">
        <div class="left">
          <el-input
            v-model="searchForm.storeName"
            placeholder="请输入门店名称或者门店编码"
            @keyup.enter="getStoreCount"
          ></el-input>
        </div>
        <div class="center">
          <el-radio-group v-model="searchForm.status" @input="radioChange">
            <el-radio :label="1">营业</el-radio>
            <el-radio :label="2">歇业中</el-radio>
            <el-radio :label="3">闭店</el-radio>
          </el-radio-group>
        </div>
        <div class="right">
          <p class="level">{{ getJsonParams.level }}</p>
        </div>
        <el-button :disabled="loading" class="refresh" @click="refresh"
          >重置</el-button>
        <el-button
          :disabled="loading"
          class="back_btn"
          v-show="btnShow"
          @click="goBack"
          >返回</el-button>
      </div>
      <div v-loading="loading" v-show="showEcharts" id="map" class="map"></div>
      <div
        v-for="(item, index) in itemList"
        :key="index"
        class="card-item"
        :class="'card-item' + index"
      >
        <div class="name">{{ item.name }}</div>
        <div class="value">{{ item.value }}</div>
      </div>
      <div class="bottom-box" ref="bottomBox">
        <card-title-slot ref="bottomTop">
          <template #title>
            设备分布排行
          </template>
          <template #left>
            <el-button type="text" @click="gotoDetail">详情</el-button>
          </template>
          <template #right>
            <el-radio-group
              v-model="searchForm.areaType"
              @change="getTableData"
              size="small"
            >
              <el-radio-button :label="0">按省份</el-radio-button>
              <el-radio-button :label="1">按市</el-radio-button>
              <el-radio-button :label="2">按区县</el-radio-button>
            </el-radio-group>
          </template>
        </card-title-slot>
        <el-table
          :data="tableData"
          :height="tableHeight"
          class="table" 
          ref="table"
          @mouseenter.native="autoScroll(true)"
          @mouseleave.native="autoScroll(false)"
        >
          <el-table-column prop="ranking" label="排名" align="center"></el-table-column>
          <el-table-column prop="province" label="省份名称" align="center"></el-table-column>
          <el-table-column prop="storeCount" label="门店数量" align="center"></el-table-column>
          <el-table-column prop="deviceCount" label="设备数量" align="center"></el-table-column>
          <el-table-column prop="onlineDevice" label="在线设备" align="center"></el-table-column>
          <el-table-column prop="offlineDevice" label="离线设备" align="center"></el-table-column>
          <el-table-column prop="onlineStore" label="营业中门店" align="center"></el-table-column>
          <el-table-column prop="offlineStore" label="打烊门店" align="center"></el-table-column>
        </el-table>
      </div>
      <baiduMap v-show="!showEcharts" ref="baiduMap" />
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  import baiduMap from '@/components/common/baiduMap.vue';
  import CardTitleSlot from '@/slot/cardTitle.vue';
  import axios from 'axios';
  import fullMapData from '@/assets/js/full.json';
  export default {
    data() {
      return {
        chart: null,
        pathList: [],
        btnShow: true,
        showEcharts: true,
        getJsonParams: {
          level: '全国',
          adcode: '',
          name: ''
        },
        searchForm: {
          orgName: '',
          addressProvince: '',
          addressCity: '',
          addressArea: '',
          storeName: '',
          status: 1,
          storeCode: '',
          areaType: 0
        },
        areaInfo: {},
        mapData: [],
        loading: false,
        center: [102.317325, 29.709239],
        mapZoom: 1.5,
        isReset: false,
        itemList: [
          {name: '门店总数（个）', value: 34}, {name: '设备总数（个）', value: 100},
          {name: '离线设备（个）', value: 100}, {name: '在线设备（个）', value: 100},
          {name: '已覆盖省份（个）', value: 30}, {name: '门店省份分布占比', value: '30%'},
          {name: '已覆盖区县（个）', value: 30}, {name: '门店区县分布占比', value: '30%'}
        ],
        tableData: [],
        tableHeight: 200,
        scrolltimer: '', // 自动滚动的定时任务
      };
    },
    components: { baiduMap, CardTitleSlot },
    created() {
      this.$nextTick(() => {
        this.tableHeight = this.$refs.bottomBox.offsetHeight - this.$refs.bottomTop.$el.offsetHeight - 10;
      });
      this.getTableData();
    },
    mounted() {
      this.initChinaMap();
      this.autoScroll();
    },
    beforeDestroy() {
   	  this.autoScroll(true)
    },
    methods: {
      getTableData() {
        this.tableData = [
          {ranking: 1, province: '广东省', storeCount: 100, deviceCount: 100, onlineDevice: 100, offlineDevice: 100, onlineStore: 100, offlineStore: 100},
          {ranking: 2, province: '湖南省', storeCount: 100, deviceCount: 100, onlineDevice: 100, offlineDevice: 100, onlineStore: 100, offlineStore: 100},
          {ranking: 3, province: '黑龙江省', storeCount: 100, deviceCount: 100, onlineDevice: 100, offlineDevice: 100, onlineStore: 100, offlineStore: 100},
          {ranking: 4, province: '重庆', storeCount: 100, deviceCount: 100, onlineDevice: 100, offlineDevice: 100, onlineStore: 100, offlineStore: 100},
          {ranking: 1, province: '浙江省', storeCount: 100, deviceCount: 100, onlineDevice: 100, offlineDevice: 100, onlineStore: 100, offlineStore: 100},
          {ranking: 2, province: '江西省', storeCount: 100, deviceCount: 100, onlineDevice: 100, offlineDevice: 100, onlineStore: 100, offlineStore: 100},
          {ranking: 3, province: '北京', storeCount: 100, deviceCount: 100, onlineDevice: 100, offlineDevice: 100, onlineStore: 100, offlineStore: 100},
          {ranking: 4, province: '上海', storeCount: 100, deviceCount: 100, onlineDevice: 100, offlineDevice: 100, onlineStore: 100, offlineStore: 100},
          {ranking: 5, province: '福建省', storeCount: 100, deviceCount: 100, onlineDevice: 100, offlineDevice: 100, onlineStore: 100, offlineStore: 100},
          {ranking: 6, province: '内蒙古自治区', storeCount: 100, deviceCount: 100, onlineDevice: 100, offlineDevice: 100, onlineStore: 100, offlineStore: 100},
          {ranking: 7, province: '青海省', storeCount: 100, deviceCount: 100, onlineDevice: 100, offlineDevice: 100, onlineStore: 100, offlineStore: 100},
          {ranking: 8, province: '新疆维吾尔自治区', storeCount: 100, deviceCount: 100, onlineDevice: 100, offlineDevice: 100, onlineStore: 100, offlineStore: 100},
          {ranking: 9, province: '西藏自治区', storeCount: 100, deviceCount: 100, onlineDevice: 100, offlineDevice: 100, onlineStore: 100, offlineStore: 100},
         {ranking: 10, province: '海南省', storeCount: 100, deviceCount: 100, onlineDevice: 100, offlineDevice: 100, onlineStore: 100, offlineStore: 100},
         {ranking: 11, province: '甘肃省', storeCount: 100, deviceCount: 100, onlineDevice: 100, offlineDevice: 100, onlineStore: 100, offlineStore: 100},
         {ranking: 12, province: '宁夏回族自治区', storeCount: 100, deviceCount: 100, onlineDevice: 100, offlineDevice: 100, onlineStore: 100, offlineStore: 100},
         {ranking: 13, province: '广西壮族自治区', storeCount: 100, deviceCount: 100, onlineDevice: 100, offlineDevice: 100, onlineStore: 100, offlineStore: 100}
        ];
        this.tableData.forEach((item, index) => {
            item.ranking = index + 1;
            item.storeCount = Math.floor(Math.random() * 1000);
            item.deviceCount = Math.floor(Math.random() * 1000);
            item.onlineDevice = Math.floor(Math.random() * 1000);
            item.offlineDevice = Math.floor(Math.random() * 1000);
            item.onlineStore = Math.floor(Math.random() * 1000);
            item.offlineStore = Math.floor(Math.random() * 1000);
        });
      },
      getStoreCount() {
        // this.loading = true;
        if (this.getJsonParams.level === '全国') {
          this.searchForm.addressProvince = '';
          this.searchForm.addressCity = '';
          this.searchForm.addressArea = '';
        } else if (this.getJsonParams.level === '省') {
          this.searchForm.addressCity = '';
          this.searchForm.addressArea = '';
        } else if (this.getJsonParams.level === '市') {
          this.searchForm.addressArea = '';
        } else if (this.getJsonParams.level === '区/县') {
          this.loading = false;
          this.$refs.baiduMap.initStoreMap(this.searchForm);
          return;
        }
        this.loading = false;
        this.areaInfo = {};
  
        if (this.getJsonParams.level === '全国') {
          this.center = [102.317325, 29.709239];
          this.mapZoom = 1.2;
          this.getJSON('china', 100000, '全国');
          this.pathList = [{ name: 'china', adcode: 100000, level: '全国' }];
        } else {
          this.getJSON(this.getJsonParams.name, this.getJsonParams.adcode, this.getJsonParams.level);
          let hasCurrentPath = this.pathList.some(item => item.adcode === this.getJsonParams.adcode);
          if (!hasCurrentPath) {
            this.pathList.push({ name: this.getJsonParams.name, adcode: this.getJsonParams.adcode, level: this.getJsonParams.level });
          }
        }
      },
      initChinaMap() {
        this.chart = echarts.init(document.getElementById('map'));
        this.getStoreCount();
        const that = this;
        this.chart.on('click', function (params) {
          if (params.data) {
            that.loading = true;

            that.center = '';
            that.mapZoom = 1.1;
            const { adcode, name, level } = params.data;
            that.getJsonParams.adcode = adcode;
            that.getJsonParams.name = name;
            that.getJsonParams.level = level;
            if (level === 'province') {
              that.getJsonParams.level = '省';
              that.searchForm.addressProvince = name;
              that.getStoreCount();
            } else if (level === 'city') {
              that.getJsonParams.level = '市';
              that.searchForm.addressCity = name;
              that.getStoreCount();
            } else if (level === 'district') {
              that.getJsonParams.level = '区/县';
              that.getStoreCount();
              that.searchForm.addressArea = name;
              let fullDistrictName = that.searchForm.addressProvince + that.searchForm.addressCity + name;
              that.showEcharts = false;
              that.$refs.baiduMap.initMap(fullDistrictName);
              that.loading = false;
            }
          }
        });
        this.chart.on('dblclick', function (params) {
          that.$message.warning('请勿点击过快');
        });
      },
      // 获取地图json数据
      async getJSON(name, adcode, level) {
        let jsonData;
        if (name === 'china' && adcode === 100000) {
          jsonData = fullMapData;
        } else {
          try {
            await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${adcode}_full.json`).then(response => {
              jsonData = response.data;
            });
          } catch (e) {
            console.log('获取地图数据失败', e);
          }
        }

        const that = this;
        jsonData.features.forEach(f => {
          f.properties.storeCount = randomInt(50, 500);
          f.properties.deviceCount = randomInt(50, 600);
          f.properties.coverAreaCount = randomInt(5, 120);
          f.properties.coverRate = `${randomInt(30, 95)}%`;
          that.areaInfo[f.properties.name] = f.properties;
        });

        if (!jsonData) {
          return this.$message.warning('无法获取此区域地图数据，请查看其他区域！');
        }
        this.renderChart(name, jsonData);
        // 如果为中国地图，隐藏返回
        if (adcode === 100000) {
          this.btnShow = false;
        } else {
          this.btnShow = true;
        }
  
        function randomInt(min, max) {
          return Math.floor(Math.random() * (max - min + 1)) + min;
        }
      },
      renderChart(name, data) {
        // 注册地图
        echarts.registerMap(name, data);
        // 根据 json 数据拼装 mapdata， 用于地图点击下钻时传递数据，主要有adcode、name
        if (typeof data === 'string') {
          data = JSON.parse(data);
        }
        let mapdata = data.features.map((item) => {
          return item.properties;
        });
        // mapdata.forEach(data => {
        //   data.storeCount = 0;
        //   this.storeCount.forEach(store => {
        //     if (data.name.includes(store.area)) {
        //       data.storeCount += store.storeCount;
        //     }
        //   });
        // });
        // 配置option
        this.setOption(name, mapdata);
        if (this.isReset) {
          this.showEcharts = true;
          this.isReset = false;
        }
      },
      setOption(name, data) {
        const that = this;
        const option = {
          // tooltip 提示配置项
          tooltip: {
            axisPointer: {
              type: 'shadow',
              shadowStyle: {
                color: 'inset 0px 0px 4px 0px #FFFFFF, inset 1px 1px 4px 0px rgba(0,0,0,0.16), 0px 2px 3px 0px rgba(0,0,0,0.25);'
              }
            },
            backgroundColor: 'rgba(255, 255, 255, .2)',
            padding: 0,
            formatter: function (params) {
              if (params && params.data) {
                const { name } = params.data;
                return `<div style="box-shadow: inset 0px 0px 2px 0px #FFFFFF, inset 1px 1px 2px 0px rgba(0,0,0,0.16), 0px 2px 3px 0px rgba(0,0,0,0.25);
  border-radius: 4px 4px 4px 4px;">
                      <div style="padding: 4px 16px;font-size: 20px;background: #409EFF;color: #ffffff;">${name}</div>
                      <div style="padding: 8px 16px;color: #0F4794;font-size: 16px;background: rgba(255, 255, 255, .2) !important;-webkit-backdrop-filter: blur(10px);
                      backdrop-filter: blur(10px);display: flex;flex-direction: column;align-items: start;">
                        <div style="display: flex;align-items: center;margin-bottom: 8px;">
                            <span style="margin-right: 8px;font-size: 16px">门店总数：</span>
                            <span style="font-size: 16px">${that.areaInfo[name].storeCount}</span>
                        </div>
                        <div style="display: flex;align-items: center;margin-bottom: 8px;">
                            <span style="margin-right: 8px;font-size: 16px">设备总数：</span>
                            <span style="font-size: 16px">${that.areaInfo[name].deviceCount}</span>
                        </div>
                        <div style="display: flex;align-items: center;margin-bottom: 8px;">
                            <span style="margin-right: 8px;font-size: 16px">已覆盖区县：</span>
                            <span style="font-size: 16px">${that.areaInfo[name].coverAreaCount}</span>
                        </div>
                        <div style="display: flex;align-items: center;margin-bottom: 8px;">
                            <span style="margin-right: 8px;font-size: 16px">门店区县分布占比：</span>
                            <span style="font-size: 16px">${that.areaInfo[name].coverRate}</span>
                        </div>
                      </div>
              </div>
                `;
              }
            }
          },
          // 地理坐标系组件用于地图的绘制
          geo: [
            {
              // 使用 registerMap 注册的地图名称。
              map: name,
              roam: false,
              top: '9%',
              z: 5,
              selectedMode: 'single',
              zoom: this.mapZoom,
              center: this.center,
              label: {
                normal: {
                  show: true,
                  position: 'inside',
                  color: '#ffffff'
                },
                emphasis: {
                  show: true
                }
              },
              // 地图区域的多边形 图形样式。
              itemStyle: {
                // 地图区域的颜色
                areaColor: 'rgb(172,215,248)',
                // 图形的描边颜色
                borderColor: '#ffffff'
                // shadowColor: '#ffffff',
                // shadowOffsetX: 1,
                // shadowOffsetY: 5
              },
              // 设置高亮状态下的多边形和标签样式
              emphasis: {
                disabled: true,
                itemStyle: {
                  borderColor: 'rgb(3,119,237)',
                  shadowColor: 'rgb(3,119,237)',
                  shadowOffsetY: 5,
                  shadowOffsetX: 5
                }
              },
              regions: []
            },
            {
              // 使用 registerMap 注册的地图名称。
              map: name,
              roam: false,
              top: '9.5%',
              z: 4,
              selectedMode: 'single',
              zoom: this.mapZoom,
              center: this.center,
              // 地图区域的多边形 图形样式。
              itemStyle: {
                // 地图区域的颜色
                areaColor: 'rgb(91,157,250)',
                borderColor: 'rgb(102,163,250)'
              },
              emphasis: {
                disabled: true
              },
              tooltip: {
                disabled: true
              },
              select: {
                disabled: true
              },
              regions: [
                { // 隐藏南海诸岛
                  name: '南海诸岛',
                  itemStyle: {
                    // 隐藏地图
                    normal: {
                      opacity: 0 // 为 0 时不绘制该图形
                    }
                  },
                  emphasis: {
                    itemStyle: {
                      opacity: 0
                    }
                  },
                  select: {
                    disabled: true
                  },
                  label: {
                    show: false // 隐藏文字
                  }
                }
              ]
            },
            {
              map: name,
              roam: false,
              top: '10%',
              z: 3,
              selectedMode: 'single',
              zoom: this.mapZoom,
              center: this.center,
              // 地图区域的多边形 图形样式。
              itemStyle: {
                // 地图区域的颜色
                areaColor: 'rgba(91,157,250,0.6)',
                // 图形的描边颜色
                borderColor: 'rgb(130,181,248)'
              },
              emphasis: {
                disabled: true
              },
              tooltip: {
                disabled: true
              },
              select: {
                disabled: true
              },
              regions: [
                { // 隐藏南海诸岛
                  name: '南海诸岛',
                  itemStyle: {
                    // 隐藏地图
                    normal: {
                      opacity: 0 // 为 0 时不绘制该图形
                    }
                  },
                  emphasis: {
                    itemStyle: {
                      opacity: 0
                    }
                  },
                  select: {
                    disabled: true
                  },
                  label: {
                    show: false // 隐藏文字
                  }
                }
              ]
            },
            {
              map: name,
              roam: false,
              top: '10.5%',
              z: 2,
              selectedMode: 'single',
              zoom: this.mapZoom,
              center: this.center,
              // 地图区域的多边形 图形样式。
              itemStyle: {
                // 地图区域的颜色
                areaColor: 'rgba(91,157,250,0.4)',
                // 图形的描边颜色
                borderColor: 'rgb(195,219,248)'
              },
              emphasis: {
                disabled: true
              },
              tooltip: {
                disabled: true
              },
              select: {
                disabled: true
              },
              regions: [
                { // 隐藏南海诸岛
                  name: '南海诸岛',
                  itemStyle: {
                    // 隐藏地图
                    normal: {
                      opacity: 0
                    }
                  },
                  emphasis: {
                    itemStyle: {
                      opacity: 0
                    }
                  },
                  select: {
                    disabled: true
                  },
                  label: {
                    show: false // 隐藏文字
                  }
                }
              ]
            }
          ],
          series: [
            {
              name: name,
              type: 'map',
              map: name,
              geoIndex: 0,
              roam: false,
              markPoint: {
                symbol: 'image://' + '../assets/imgs/storeMapMarkPoint.png',
                // symbolSize: [28, 49], // 图片大小
                label: {
                  position: 'top',
                  color: '#FF7D00'
                },
                data: []
              },
              data: data
            }
          ]
        };
        data.sort((a, b) => b.storeCount - a.storeCount);
        data.forEach((item, index) => {
          if (index < 3) {
            option.geo[0].regions.push({
              name: item.name,
              itemStyle: {
                normal: {
                  areaColor: '#53FFFE'
                }
              },
              label: {
                color: '#0377ED'
              }
            });
            option.series[0].markPoint.data.push({
              name: item.name,
              value: `TOP${index + 1}`,
              coord: item.centroid || item.center || '',
              symbolSize: index === 0 ? [30, 40] : index === 1 ? [20, 30] : [20, 30],
              label: {
                fontSize: index === 0 ? 38 : 28,
                fontWeight: 'bold'
              }
            });
          }
        });
        this.chart.setOption(option, true);
      },
      autoScroll(stop) {
        const table = this.$refs.table
        // 拿到表格中承载数据的div元素
        const divData = table.$refs.bodyWrapper.firstElementChild.firstElementChild
        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
        if (stop) {
            //再通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
            window.clearInterval(this.scrolltimer)
        } else {
            this.scrolltimer = window.setInterval(() => {
                // 元素自增距离顶部1像素
                divData.scrollTop += 2
              // console.log('divData.scrollTop ', divData.scrollTop);
                // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
                if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
                    // 重置table距离顶部距离
                    divData.scrollTop = 0
                    // 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2
                    // divData.scrollTop = divData.scrollTop - divData.scrollHeight / 2
                }
            }, 150) // 滚动速度
        }
    },
      goBack() {
        if (!this.showEcharts) {
          this.showEcharts = true;
        }
        if (this.pathList.length >= 2) {
          if (this.getJsonParams.level === '区/县') {
            const { name, adcode, level } = this.pathList[this.pathList.length - 1];
            this.pathList.splice(-1, 1);
            this.getJsonParams.adcode = adcode;
            this.getJsonParams.name = name;
            this.getJsonParams.level = level;
            this.getStoreCount();
          } else {
            const { name, adcode, level } = this.pathList[this.pathList.length - 2];
            this.pathList.splice(-2, 2);
            this.getJsonParams.adcode = adcode;
            this.getJsonParams.name = name;
            this.getJsonParams.level = level;
            this.getStoreCount();
          }
        }
      },
      refresh() {
        this.getJsonParams = {
          level: '全国',
          adcode: '',
          name: ''
        };
        this.searchForm = {
          orgName: '',
          addressProvince: '',
          addressCity: '',
          addressArea: '',
          storeName: '',
          status: 1,
          storeCode: '',
          areaType: 0
        };
        this.$refs.templateTree && this.$refs.templateTree.inputClear();
        this.isReset = true;
        this.getStoreCount();
      },
      selectOrg(orgId, orgName) {
        this.searchForm.orgName = orgName;
        this.getStoreCount();
      },
      radioChange() {
        this.getStoreCount();
      },
      gotoDetail() {
  
      }
    }
  };
  </script>
  
  <style scoped lang="scss">
  @import "@/assets/css/util.scss";
  .container {
    width: 100%;
    height: 100%;
    background: url("../assets/imgs/storeMapBg.jpg") no-repeat center center / cover;
    position: relative;
  
    .c-top {
      z-index: 999;
      width: 100%;
      position: absolute;
      top: 15px;
      left: 0;
      padding: 10px;
      display: flex;
  
      :deep(.el-card__body) {
        padding: 10px;
      }
  
      .left {
        width: 27vw;
        display: flex;
  
        :deep(.el-card__body) {
          display: flex;
        }
  
        .org {
          width: 12.5vw;
          margin-right: 10px;
        }
  
        .company {
          width: 12.5vw;
        }
      }
  
      .center {
        padding: 0 10px;
        background-color: #fff;
        margin-left: 10px;

      }
  
      .refresh {
        position: absolute;
        right: 120px;
        top: 7px;
      }
  
      .right {
        background-color: #fff;
        margin-left: 10px;
        padding: 0 10px;
        display: flex;
        align-items: center;
  
        .level {
          line-height: 35px;
          font-size: 18px;
          color: #999999;
        }
      }
  
      .back_btn {
        position: absolute;
        right: 20px;
        top: 7px;
      }
    }
  
    .map {
      width: 100%;
      height: 100%;
    }
  
    .card-item {
      display: flex;
      flex-direction: column;
      align-items: start;
      position: absolute;
  
      .name {
        font-weight: bold;
        font-size: 20px;
        color: #0f4794;
        margin-bottom: 20px;
      }
      .value {
        font-size: 48px;
        color: #0377ed;
      }
    }
    .card-item0 {
      top: 120px;
      left: 110px;
    }
    .card-item1 {
      top: 260px;
      left: 110px;
    }
    .card-item2 {
      top: 420px;
      left: 110px;
      .value {
        color: #ff7d00;
      }
    }
    .card-item3 {
      top: 560px;
      left: 110px;
      .value {
        color: #009a29;
      }
    }
    .card-item4 {
      top: 120px;
      right: 110px;
    }
    .card-item5 {
      top: 260px;
      right: 110px;
    }
    .card-item6 {
      top: 420px;
      right: 110px;
    }
    .card-item7 {
      top: 560px;
      right: 110px;
    }
  
    .bottom-box {
        height: 324px;
        position: absolute;
        bottom: 24px;
        left: 24px;
        right: 24px;
        box-shadow: inset 1px 1px 4px 0px #ffffff;
        border-radius: 4px 4px 4px 4px;
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
        .top {
        padding: vh(10) vw(18) 0 vw(18);
        height: auto;
        //margin-bottom: 0;
        }
        :deep(.el-table th.el-table__cell) {
        background-color: transparent !important;
        }
        :deep(.el-table .el-table__cell) {
        background-color: transparent !important;
        }
        :deep(.el-table tr) {
        background-color: transparent !important;
        }
        :deep(.el-table, .el-table__expanded-cell) {
        background-color: transparent !important;
        }
        /* 删除表格下最底层的横线 */
        :deep(.el-table::before) {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0px;
        }
    }

  }
  </style>
  